<template>
  <div>
    <div style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
      />
      <!-- 编辑器 -->
      <Editor
          style="height: 300px;width: 100%; overflow-y: hidden ;text-align: left"
          :defaultConfig="editorConfig"
          v-model="html"
          @onChange="onChange"
          @onCreated="onCreated"
      />
    </div>
  </div>
</template>

<script>
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";

export default {
  name: "EditorVue",
  components: {Editor, Toolbar},
  props: {
    content: {
      type: String,
      default: '',
    },
    readOnlys: { // 只读
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      editor: null,
      html: '',
      mode: 'default',
      toolbarConfig: {
        /* 显示哪些菜单，如何排序、分组 */

        // 富文本手动插入工具栏
        insertKeys: {
          index: 22, // 自定义插件在工具栏显示的位置
          keys: ['uploadAttachment'] // 查看名称
        },
        toolbarKeys: [
          'headerSelect',
          // '|',
          'bold',
          'underline',
          'italic',
          'color',
          'bgColor',
          // '|',
          'indent',  // 增加缩进
          'delIndent',  // 减少缩进
          'justifyLeft',  // 左对齐
          'justifyRight',  // 右对齐
          'justifyCenter',  // 居中
          'justifyJustify',  // 两端对齐
          // '|',
          'fontSize',
          'fontFamily',
          'lineHeight',
          // '|',
          'bulletedList',
          'numberedList',
          'todo',
          'insertLink',
          'insertTable',
          // '|',
          // 'codeBlock',
          'divider',
          'uploadImage',
          'undo',
          'redo',
        ],
        // excludeKeys: [ ], /* 隐藏哪些菜单 */
      },
      editorConfig: {
        placeholder: "请输入内容",
        // autoFocus: false,
        // readOnly: true, // 只读、不可编辑
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        hoverbarKeys: {
          attachment: {
            menuKeys: ['downloadAttachment'], // “下载附件”菜单
          },
        },
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {
            allowedFileTypes: ["image/*"],
            customUpload: this.uploaadImg
          },
          uploadAttachment: {
            // server:'http://localhost:9999/file/uploadFile2',
            title: '上传附件',
            header:{Accept:'text/x-json'},
            fieldName: 'file',
            // 超时时间，默认为 10 秒
            timeout: 100 * 1000, // 5 秒
            // 用户自定义上传
            customUpload:this.uploadAttachmentMethod,
            // 在上传之前
            onBeforeUpload(file) {
              console.log('onBeforeUpload', file)
              return file // 上传 file 文件
              // return false // 会阻止上传
            },
            // 关于进展
            onProgress(progress) {
              console.log('onProgress', progress)
            },
            // 成功回调
            onSuccess(file, res) {
              if(res.errno === 0){
                ElMessage.success(`${file}附件上传成功`)
              }
            },
            // 失败回调
            onFailed(file, res) {
              if(res.errno === 1){
                ElMessage.success(`${file}附件上传失败，`+res.message)
              }
            },
            // 错误
            onError(file, err, res) {
              console.error('onError', file, err, res)
            },

            // // 上传成功后，用户自定义插入文件
            // customInsert(res: any, file: File, insertFn: Function) {
            //   console.log('customInsert', res)
            //   const { url } = res.data || {}
            //   if (!url) throw new Error(`url is empty`)

            //   // 插入附件到编辑器
            //   insertFn(`customInsert-${file.name}`, url)
            // },



            // // 自定义选择
            // customBrowseAndUpload(insertFn: Function) {
            //   alert('自定义选择文件，如弹出图床')
            //   // 自己上传文件
            //   // 上传之后用 insertFn(fileName, link) 插入到编辑器
            // },
            // 插入到编辑器后的回调
            onInsertedAttachment(elem) {
              console.log(elem)
            }

            // customUpload: this.update, // 上传方法
          }
        },
      },
    };
  },
  watch: {
    readOnlys: {
      handler(newV) {
        if (newV) {
          this.editor.disable()  // 只读模式
        }
      }
    },
  },
  methods: {
    uploadAttachmentMethod(file, insertFn){
      //调用上传附件接口
      var params=new FormData();
      params.append("file",file)
      this.$axios({
        url:'/article/article/uploadArticleFile?i=0',
        method: 'POST',
        transformRequest: [function(data, headers) {
          // 去除post请求默认的Content-Type
          delete headers.post['Content-Type']
          return data
        }],
        data: params
      }).then((res) => {

        var jason = eval("(" + res.data.data + ")");
        var href = jason.data.href
        insertFn(href.substr(19,), "http://"+jason.data.url+"?filePath=articles/新闻附件&fileName="+jason.data.href,jason.data.href)
        // insertFn("http://"+jason.data.url+"?filePath=articles/新闻内嵌图片&fileName="+jason.data.href,jason.data.href)

      })
      // console.log("resresres!")

      // console.log(res)
      // console.log(res)

      // insertFn(res.data.href, res.data.url)


      // this.$axios({
      //   method:'post',
      //   url:'http://localhost:9999/file/uploadFile2',
      //   data:this.params,
      //   headers: {'Content-Type': 'multipart/form-data'}
      // }).then((res) => {
      //   console.log(res)
      //   console.log("resres!!!!")
      //   insertFn(res.data.href, res.data.url)
      // })
      //   this.$axios.post('http://localhost:9999/file/uploadFile2', this.params,{
      //     headers: {
      //         'Content-Type': 'multipart/form-data'
      //     }
      // }).then((res) => {
      //     console.log(res)
      //     console.log("resres!!!!")
      //     insertFn(res.data.href, res.data.url)
      //   })

      //接口调用成功，将上传文件插入到富文本中去

    },
    // uploadFile(file){
    //   var params=new FormData();
    //   params.append("file",file)
    //   this.$axios.post('http://localhost:9999/file/uploadFile2', this.params).then((res) => {
    //     console.log(res)
    //     return res;
    //   })
    // },
    uploaadImg(file, insertFn) {
      // 插入图片，调接口返回图片url,通过插入conteng
      var params=new FormData();
      params.append("file",file)
      // console.log(file)
      this.$axios({
        url:'/article/article/uploadArticleFile?i=1',
        method: 'POST',
        transformRequest: [function(data, headers) {
          // 去除post请求默认的Content-Type
          delete headers.post['Content-Type']
          return data
        }],
        data: params
      }).then((res) => {
        console.log("json")
        console.log(res.data.data)
        var jason= eval("(" + res.data.data + ")");
        // var jason=eval(jason2.data)
        console.log("jason")
        console.log(jason)
        insertFn("http://"+jason.data.url+"?filePath=articles/新闻内嵌图片&fileName="+jason.data.href,jason.data.href)
        // this.src=url+"/article/article/download/"+res.data.data.pic+"?filePath=articles&fileName="+ res.data.data.pic;
        //http://localhost:9998/article/article/download/2023-05-11-20-41-07_15DEFCA69E8E2169C49D848A768A9F35.jpg?filePath=articles&fileName=2023-05-11-20-41-07_15DEFCA69E8E2169C49D848A768A9F35.jpg

      })
      // this.$emit('uploadImg', file, insertFn)
    },

    onCreated(editor) {
      this.editor = Object.seal(editor);
      // this.$store.commit('$_setEditor',this.editor)
      this.$store.commit('$_setHtml', this.html);
      this.html = this.content

    },
    onChange() {
      // this.html=this.content
      this.$emit('changeData', this.html)
    },
  },
  created() {
    this.html = this.content;
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor
    // this.$store.commit('$_setEditor',null)

  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
